<template>
    <div class="xtx-goods-page">
        <!--
            v-if 条件渲染  为true才正式渲染
            goodData && goodData.brand 为true 证明数据已经回来了？可以证明
            保证有了数据之后 div这个模板才会正式进行渲染
            此时数据已经完全ok了 就不会出现访问不到的情况了

            本质上 v-if 硬性的控制了渲染时机 抛弃了第一次渲染{}
            只保留了有数据之后的渲染 就不会有问题了
        -->
        <div class="container m-top-20" v-if="loadGoodsObj && loadGoodsObj.brand">
            <!-- 商品信息 -->
            <div class="goods-info">
                <div class="media">
                    <!-- 图片预览区 -->
                    <XtxImageView :imageList="loadGoodsObj.mainPictures" />
                    <!-- 统计数量 -->
                    <ul class="goods-sales">
                        <li>
                            <p>销量人气</p>
                            <p>{{ loadGoodsObj.salesCount }}+</p>
                            <p>
                                <i class="iconfont icon-task-filling"></i>销量人气
                            </p>
                        </li>
                        <li>
                            <p>商品评价</p>
                            <p>{{ loadGoodsObj.commentCount }}+</p>
                            <p>
                                <i class="iconfont icon-comment-filling"></i>查看评价
                            </p>
                        </li>
                        <li>
                            <p>收藏人气</p>
                            <p>{{ loadGoodsObj.collectCount }}+</p>
                            <p>
                                <i class="iconfont icon-favorite-filling"></i>收藏商品
                            </p>
                        </li>
                        <li>
                            <p>品牌信息</p>
                            <!--
                                goodData.brand 是 undefined
                                {}.brand => undefined
                                {}.brand.name => undefined.name  js语法错误
                                如何解决？

                                如果brand没有值就不会继续往后运算也就不会执行.name

                                组件渲染并不会等待你的异步返回数据才渲染 而是首先使用{}进行第一次渲染
                                有了数据之后进行第二次渲染！！
                            -->
                            <p>{{ loadGoodsObj.brand.name }}</p>
                            <p>
                                <i class="iconfont icon-dynamic-filling"></i>品牌主页
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="spec">
                    <!-- 商品信息区 -->
                    <p class="g-name">{{ loadGoodsObj.name }}</p>
                    <p class="g-desc">{{ loadGoodsObj.desc }}</p>
                    <p class="g-price">
                        <span>{{ loadGoodsObj.price }}</span>
                        <span>{{ loadGoodsObj.oldPrice }}</span>
                    </p>
                    <div class="g-service">
                        <dl>
                            <dt>促销</dt>
                            <dd>12月好物放送，App领券购买直降120元</dd>
                        </dl>
                        <dl>
                            <dt>服务</dt>
                            <dd>
                                <span>无忧退货</span>
                                <span>快速退款</span>
                                <span>免费包邮</span>
                                <a href="javascript:;">了解详情</a>
                            </dd>
                        </dl>
                    </div>
                    <!-- sku组件 -->
                    <XtxGoodSku :goods="loadGoodsObj" @change="skuChange" />
                    <!-- 数据组件 -->
                    <XtxNumBox :min="1" :max="5" v-model="count" />
                    <!-- 按钮组件 -->
                    <XtxButton type="primary" style="margin-top: 20px;" @click="insertCart">加入购物车</XtxButton>
                </div>
            </div>
            <div class="goods-footer">
                <div class="goods-article">
                    <!-- 商品详情 -->
                    <goodDetailVue :goods="loadGoodsObj" />
                </div>
                <!-- 24热榜+专题推荐 -->
                <div class="goods-aside">
                    <goodHotVue type="1" />
                    <goodHotVue type="2" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { findGoods } from '@/api/good'
import Message from '@/components/Message/index.js'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import goodDetailVue from './components/good-detail.vue'
import goodHotVue from './components/good-hot.vue'
export default {
  components: {
    goodDetailVue, goodHotVue
  },
  setup () {
    // 定义一个响应式数据的时候 怎么知道初始类型是什么？
    // 关键点：看它以后要存什么类型
    // 分为两类
    // 第一类: 从接口返回的数据 (后端返回的数据是啥类型 根据接口文档可以确定)
    // 第二类：在当前组件中做交互效果时临时的状态数据(当前状态要做什么用 不固定)
    // 交互：点击打开隐藏 Dialog 类型为布尔值的响应式数据

    // 项目架构模式和之前的写法不太一样
    // 第一类数据，后端返回的数据  store做存储
    // 第二类数据，临时状态数据，才写到组件里面
    // 通过store建模 + 组件只负责渲染

    // 新鲜好物数据详情
    const loadGoodsObj = ref({})
    const route = useRoute()
    async function loadGoodsFn () {
      const res = await findGoods(route.params.id)
      console.log('获取新鲜好物数据详情', res)
      loadGoodsObj.value = res.data.result
    }
    loadGoodsFn()
    const count = ref(1)
    let skuObj = {}
    function skuChange (sku) {
      skuObj = sku
    }

    // 加入购物车
    const store = useStore()
    const router = useRouter()
    async function insertCart () {
    //  console.log(skuObj.skuId)
    // sku是否有效的判断
      if (!skuObj.skuId) {
        // 1. 执行函数 2.把函数结果提前return 阻断后续逻辑
        return Message({ type: 'warn', text: '请选择正确商品规格' })
      }
      // 是否登录
      const token = store.state.user.profile.token
      console.log(token)
      if (!token) {
        // 跳回到登录页
        router.push({
          path: '/login',
          query: {
            redirect: encodeURIComponent(route.fullPath)
          }
        })
      } else {
        // 实现加入购物车逻辑 调用action函数
        await store.dispatch('cart/setCartApi', {
          skuId: skuObj.skuId,
          count: count.value
        })
        // 给到用户一个提示
        Message({ type: 'success', text: '加入购物车成功' })
      }
    }
    return {
      loadGoodsObj, count, insertCart, skuChange
    }
  }
}
</script>

<style scoped lang='less'>
.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;
    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
    }
    .spec {
        flex: 1;
        padding: 30px 30px 30px 0;
    }
}
.goods-footer {
    display: flex;
    margin-top: 20px;
    .goods-article {
        width: 940px;
        margin-right: 20px;
    }
    .goods-aside {
        width: 280px;
        min-height: 1000px;
    }
}
.goods-tabs {
    min-height: 600px;
    background: #fff;
}
.goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
}

.number-box {
    display: flex;
    align-items: center;
    .label {
        width: 60px;
        color: #999;
        padding-left: 10px;
    }
}
.g-name {
    font-size: 22px;
}
.g-desc {
    color: #999;
    margin-top: 10px;
}
.g-price {
    margin-top: 10px;
    span {
        &::before {
            content: "¥";
            font-size: 14px;
        }
        &:first-child {
            color: @priceColor;
            margin-right: 10px;
            font-size: 22px;
        }
        &:last-child {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
        }
    }
}
.g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;
    dl {
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        dt {
            width: 50px;
            color: #999;
        }
        dd {
            color: #666;
            &:last-child {
                span {
                    margin-right: 10px;
                    &::before {
                        content: "•";
                        color: @xtxColor;
                        margin-right: 2px;
                    }
                }
                a {
                    color: @xtxColor;
                }
            }
        }
    }
}
.goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;
    li {
        flex: 1;
        position: relative;
        ~ li::after {
            position: absolute;
            top: 10px;
            left: 0;
            height: 60px;
            border-left: 1px solid #e4e4e4;
            content: "";
        }
        p {
            &:first-child {
                color: #999;
            }
            &:nth-child(2) {
                color: @priceColor;
                margin-top: 10px;
            }
            &:last-child {
                color: #666;
                margin-top: 10px;
                i {
                    color: @xtxColor;
                    font-size: 14px;
                    margin-right: 2px;
                }
                &:hover {
                    color: @xtxColor;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
